<template>
  <div class="bar">
    <div class="item" style="font-size: 17px">推荐</div>
    <div class="item">热门解读</div>
    <div class="item">新片预告</div>
    <div class="item">速看电影</div>
    <div class="item">剧集综艺</div>
    <!-- <div class="line"></div> -->
  </div>
</template>

<script>
export default {
  name: "SwichBar",
};
</script>

<style scoped>
.bar {
  width: 10rem;
  height: 46px;
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  overflow-x: scroll;
  position: relative;
}
.bar::-webkit-scrollbar {
  width: 0 !important;
}
.item {
  margin: 0px 15px;
  height: 1.2267rem;
  font-size: 15px;
  color: #333;
  line-height: 45px;
}
.line {
  width: 20px;
  height: 3px;
  position: absolute;
  bottom: 0;
  background: #f03d37;
  z-index: 10;
  padding: 0px 0px;
  transition: 0.7s;
}
</style>